<template>
  <div
      id='workflow-container'
      class="relative h-full w-full min-w-[960px] workflow-node-animation"
    >
      <VueFlow
        :nodeTypes="nodeTypes"
        :edgeTypes="edgeTypes"
        :nodes="nodes"
        :edges="edges"
        @nodeDragStart="handleNodeDragStart"
        @nodeDrag="handleNodeDrag"
        @nodeDragStop="handleNodeDragStop"
        @nodeMouseEnter="handleNodeEnter"
        @nodeMouseLeave="handleNodeLeave"
        @nodeClick="handleNodeClick"
        @nodeContextMenu="handleNodeContextMenu"
        @connect="handleNodeConnect"
        @connectStart="handleNodeConnectStart"
        @connectEnd="handleNodeConnectEnd"
        @edgeMouseEnter="handleEdgeEnter"
        @edgeMouseLeave="handleEdgeLeave"
        @edgesChange="handleEdgesChange"
        @selectionStart="handleSelectionStart"
        @selectionChange="handleSelectionChange"
        @selectionDrag="handleSelectionDrag"
        @paneContextMenu="handlePaneContextMenu"
        :connectionLineComponent="CustomConnectionLine"
        :connectionLineContainerStyle="{ zIndex: ITERATION_CHILDREN_Z_INDEX }"
        :defaultViewport="viewport"
        :multiSelectionKeyCode="null"
        :deleteKeyCode="null"
        :nodesDraggable="!nodesReadOnly"
        :nodesConnectable="!nodesReadOnly"
        :nodesFocusable="!nodesReadOnly"
        :edgesFocusable="!nodesReadOnly"
        :panOnDrag="controlMode === ControlMode.Hand && !workflowReadOnly"
        :zoomOnPinch="!workflowReadOnly"
        :zoomOnScroll="!workflowReadOnly"
        :zoomOnDoubleClick="!workflowReadOnly"
        :isValidConnection="isValidConnection"
        :selectionKeyCode="null"
        :selectionMode="SelectionMode.Partial"
        :selectionOnDrag="controlMode === ControlMode.Pointer && !workflowReadOnly"
        :minZoom="0.25"
      >
        <Background
          gap={[14, 14]}
          size={2}
          className="bg-workflow-canvas-workflow-bg"
          color='var(--color-workflow-canvas-workflow-dot-color)'
        />
      </VueFlow>
    </div>
</template>
<script lang="ts" setup name="Workflow">
import {ref} from 'vue';
import {
  useEventListener,
} from '@vueuse/core'
import { useNodesData, useVueFlow, VueFlow} from '@vue-flow/core'
import type { ViewportTransform as ViewPort } from '@vue-flow/core';
import 'vueflow/dist/style.css'
import './style.css'
import type {
  Edge,
  EnvironmentVariable,
  Node,
} from './types'
import {
  ControlMode,
  SupportUploadFileTypes,
} from './types'
import {
  useDSL,
  useEdgesInteractions,
  useNodesInteractions,
  useNodesReadOnly,
  useNodesSyncDraft,
  usePanelInteractions,
  useSelectionInteractions,
  useShortcuts,
  useWorkflow,
  useWorkflowInit,
  useWorkflowReadOnly,
  useWorkflowUpdate,
} from './hooks'
import Header from './header'
import CustomNode from './nodes'
import CustomNoteNode from './note-node'
import { CUSTOM_NOTE_NODE } from './note-node/constants'
import CustomIterationStartNode from './nodes/iteration-start'
import { CUSTOM_ITERATION_START_NODE } from './nodes/iteration-start/constants'
import CustomLoopStartNode from './nodes/loop-start'
import { CUSTOM_LOOP_START_NODE } from './nodes/loop-start/constants'
import CustomSimpleNode from './simple-node'
import { CUSTOM_SIMPLE_NODE } from './simple-node/constants'
import Operator from './operator'
import CustomEdge from './custom-edge'
import CustomConnectionLine from './custom-connection-line'
import Panel from './panel'
import Features from './features'
import HelpLine from './help-line'
import CandidateNode from './candidate-node'
import PanelContextmenu from './panel-contextmenu'
import NodeContextmenu from './node-contextmenu'
import SyncingDataModal from './syncing-data-modal'
import UpdateDSLModal from './update-dsl-modal'
import DSLExportConfirmModal from './dsl-export-confirm-modal'
import LimitTips from './limit-tips'
import PluginDependency from './plugin-dependency'
import {
  useStore,
  useWorkflowStore,
} from './store'
import {
  initialEdges,
  initialNodes,
} from './utils'
import {
  CUSTOM_EDGE,
  CUSTOM_NODE,
  DSL_EXPORT_CHECK,
  ITERATION_CHILDREN_Z_INDEX,
  WORKFLOW_DATA_UPDATE,
} from './constants'
import { WorkflowHistoryProvider } from './workflow-history-store'
import Loading from '@/app/components/base/loading'
import { FeaturesProvider } from '@/app/components/base/features'
import type { Features as FeaturesData } from '@/app/components/base/features/types'
import { useFeaturesStore } from '@/app/components/base/features/hooks'
import { useEventEmitterContextContext } from '@/context/event-emitter'
import Confirm from '@/app/components/base/confirm'
import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
import { fetchFileUploadConfig } from '@/service/common'
import DatasetsDetailProvider from './datasets-detail-store/provider'
import { onMounted, onUnmounted } from 'vue'

const nodeTypes = {
  [CUSTOM_NODE]: CustomNode,
  [CUSTOM_NOTE_NODE]: CustomNoteNode,
  [CUSTOM_SIMPLE_NODE]: CustomSimpleNode,
  [CUSTOM_ITERATION_START_NODE]: CustomIterationStartNode,
  [CUSTOM_LOOP_START_NODE]: CustomLoopStartNode,
}
const edgeTypes = {
  [CUSTOM_EDGE]: CustomEdge,
}


type WorkflowProps = {
  nodes: Node[]
  edges: Edge[]
  viewport?: ViewPort
}

const props = withDefaults(defineProps<WorkflowProps>(),{
  nodes:()=> [],
  edges:()=> [],
})

  const workflowContainerRef = ref<HTMLDivElement>()
  const workflowStore = useWorkflowStore()
  const vueflow = useVueFlow()
  const featuresStore = useFeaturesStore()
  const [nodes, setNodes] = useNodesData(originalNodes)
  const [edges, setEdges] = useEdgesState(originalEdges)
  const showFeaturesPanel = useStore(state => state.showFeaturesPanel)
  const controlMode = useStore(s => s.controlMode)
  const nodeAnimation = useStore(s => s.nodeAnimation)
  const showConfirm = useStore(s => s.showConfirm)
  const showImportDSLModal = useStore(s => s.showImportDSLModal)

  const {
    setShowConfirm,
    setControlPromptEditorRerenderKey,
    setShowImportDSLModal,
    setSyncWorkflowDraftHash,
  } = workflowStore.getState()
  const {
    handleSyncWorkflowDraft,
    syncWorkflowDraftWhenPageClose,
  } = useNodesSyncDraft()
  const { workflowReadOnly } = useWorkflowReadOnly()
  const { nodesReadOnly } = useNodesReadOnly()

  const secretEnvList = ref<EnvironmentVariable[]>([])

  const { eventEmitter } = useEventEmitterContextContext()

  eventEmitter?.useSubscription((v: any) => {
    if (v.type === WORKFLOW_DATA_UPDATE) {
      setNodes(v.payload.nodes)
      setEdges(v.payload.edges)

      if (v.payload.viewport)
        vueflow.setViewport(v.payload.viewport)

      if (v.payload.features && featuresStore) {
        const { setFeatures } = featuresStore.getState()

        setFeatures(v.payload.features)
      }

      if (v.payload.hash)
        setSyncWorkflowDraftHash(v.payload.hash)

      setTimeout(() => setControlPromptEditorRerenderKey(Date.now()))
    }
    if (v.type === DSL_EXPORT_CHECK)
    secretEnvList.value =v.payload.data as EnvironmentVariable[]
  })



  const { handleRefreshWorkflowDraft } = useWorkflowUpdate()
  const handleSyncWorkflowDraftWhenPageClose = useCallback(() => {
    if (document.visibilityState === 'hidden')
      syncWorkflowDraftWhenPageClose()
    else if (document.visibilityState === 'visible')
      setTimeout(() => handleRefreshWorkflowDraft(), 500)
  }, [syncWorkflowDraftWhenPageClose, handleRefreshWorkflowDraft])

  onMounted(() => {
    setAutoFreeze(false)
    handleSyncWorkflowDraft(true, true)
    document.addEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)
  })

  onUnmounted(()=> {
    setAutoFreeze(true)
    document.removeEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)
  })

  useEventListener('keydown', (e) => {
    if ((e.key === 'd' || e.key === 'D') && (e.ctrlKey || e.metaKey))
      e.preventDefault()
    if ((e.key === 'z' || e.key === 'Z') && (e.ctrlKey || e.metaKey))
      e.preventDefault()
    if ((e.key === 'y' || e.key === 'Y') && (e.ctrlKey || e.metaKey))
      e.preventDefault()
    if ((e.key === 's' || e.key === 'S') && (e.ctrlKey || e.metaKey))
      e.preventDefault()
  })
  useEventListener('mousemove', (e) => {
    const containerClientRect = workflowContainerRef.value?.getBoundingClientRect()

    if (containerClientRect) {
      workflowStore.setState({
        mousePosition: {
          pageX: e.clientX,
          pageY: e.clientY,
          elementX: e.clientX - containerClientRect.left,
          elementY: e.clientY - containerClientRect.top,
        },
      })
    }
  })

  const {
    handleNodeDragStart,
    handleNodeDrag,
    handleNodeDragStop,
    handleNodeEnter,
    handleNodeLeave,
    handleNodeClick,
    handleNodeConnect,
    handleNodeConnectStart,
    handleNodeConnectEnd,
    handleNodeContextMenu,
    handleHistoryBack,
    handleHistoryForward,
  } = useNodesInteractions()
  const {
    handleEdgeEnter,
    handleEdgeLeave,
    handleEdgesChange,
  } = useEdgesInteractions()
  const {
    handleSelectionStart,
    handleSelectionChange,
    handleSelectionDrag,
  } = useSelectionInteractions()
  const {
    handlePaneContextMenu,
    handlePaneContextmenuCancel,
  } = usePanelInteractions()
  const {
    isValidConnection,
  } = useWorkflow()
  const {
    exportCheck,
    handleExportDSL,
  } = useDSL()

  useOnViewportChange({
    onEnd: () => {
      handleSyncWorkflowDraft()
    },
  })

  useShortcuts()

  const store = useStoreApi()
  if (process.env.NODE_ENV === 'development') {
    store.getState().onError = (code, message) => {
      if (code === '002')
        return
      console.warn(message)
    }
  }



</script>
